
<div style="position:absolute; left: 120px"><el-button type="success" plain size="medium" @click.native="addclothesPage()">添加服装</el-button></div>
<template>
    <el-table
            :data="tableData"
            style="width: 100%">
        <el-table-column
                label="货号"
                prop="citem">
        </el-table-column>
        <el-table-column
                label="品名"
                prop="cname">
        </el-table-column>
        <el-table-column
                label="色号"
                prop="clrnum">
        </el-table-column>
        <el-table-column
                label="尺码"
                prop="size">
        </el-table-column>
        <el-table-column
                label="面料"
                prop="fabric">
        </el-table-column>
        <el-table-column
                label="出厂价格"
                prop="out_price">
        </el-table-column>
        <el-table-column
                label="零售价格"
                prop="sell_price">
        </el-table-column>
        <el-table-column
                label="里料"
                prop="material">
        </el-table-column>

        <el-table-column
                align="right">
            <template slot="header" slot-scope="scope">
                <el-input
                        v-model="search"
                        size="mini"
                        @keyup.enter.native="handleCurrentChange(1)"
                        placeholder="输入关键字搜索"/>
            </template>
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<div class="block">
    <el-pagination
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="size"
            layout="total, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
</div>

</div>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            activeIndex: '3-1',
            search: '',
            pageable:{},
            tableData:[],
            total:0,
            currentPage: 1,
            size:8

        },
        mounted: function () {
            this.handleCurrentChange(this.currentPage);
        },
        methods:{
            addclothesPage: function(){
                window.location.href = "clothes_add_page";
            },
            //表格
            handleEdit: function(index, row) {
                console.log(index);
                console.log(row.citem);
                var url = "clothes_edit_page?citem=" + row.citem;
                window.location.href = url;
            },
            handleDelete: function(index, row) {
                var obj = this;
                console.log(index, row.citem);
                var url = "clothes/del/" + row.citem + "/";
                console.log("url:" + url);
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.delete(url).then(function (response) {
                        var res = response.data;
                        if(res.success){
                            obj.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            vue.handleCurrentChange(vue.currentPage);
                        }else {
                            obj.$message.error({
                                type: 'fail',
                                message: res.msg
                            });
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //分页
            handleCurrentChange: function(page) {
                this.currentPage = page;
                var size = this.size;
                var url = "clothes/list/" + page + "/" + size;
                var keyword = this.search.trim();
                if(""!=keyword){
                    url = "clothes/list/" + page + "/" + size + "?keyword=" + keyword;
                }
                console.log("url:" + url);
                axios.get(url).then(function (response) {
                    vue.pageable = response.data;
                    vue.tableData = vue.pageable.content;
                    vue.total = vue.pageable.totalElements;
                    console.log("你好：" + JSON.stringify(vue.tableData));
                });
            }
        }
    })
</script>